<template>
  <div class="price-bar clear">
    <slot class="bar-title"><span class="bar-title"><i class="el-icon-s-fold"></i>数据列表</span></slot>
    <div class="bar-btn">
      <el-button size="small" v-show="addBtn" @click="onaddBtn" class="padd">{{
        addBtn
      }}</el-button>
      <el-button size="small" v-show="toBtn" class="padd" @click="$router.push(toBtn.path)">
        {{ toBtn.text }}
      </el-button>
      <slot name="import" class="padd"></slot>
      <slot name="export" class="padd"></slot>
      <el-select
        v-model="page"
        placeholder="显示条数"
        class="select padd"
        size="small"
        @change="onChangePage"
        v-show="pageSize"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="sort"
        placeholder="排序"
        class="select"
        size="small"
        @change="onChangeSort"
        v-show="sortSelect"
      >
        <el-option
          v-for="item in sorts"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableBar",
  data() {
    return {
      options: [
        {
          value: 5,
        },
        {
          value:10,
        },
        {
          value: 15,
        },
      ],
      sorts: [
        {
          value: "升序",
        },
        {
          value: "降序",
        },
      ],
      page: this.pageSize,
      sort: this.sortSelect,
    };
  },
  props: {
    addBtn: {
      //按钮
      String,
      default: false,
    },
    toBtn: {
      //跳转按钮
      Object,
      default: false,
    },
    sortSelect: {
      //排序下拉
      String,
      default: false,
    },
    pageSize: {
      //分页下拉
      Number,
      default: false,
    },
  },

  methods: {
    onaddBtn() {
      this.$emit("myAddBtn");
    },
    onChangeSort() {
      console.log(this.sort);
      this.$emit("update:sortSelect", this.sort);
    },
    onChangePage() {
      this.$emit("update:pageSize", this.page);
    },
  },
};
</script>


<style lang="scss" scoped>
@import "@/assets/sass/var.scss";
.price-bar {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background-color: $table-barcolor;
}
.bar-btn {
  float: right;
  padding-right: 20px;
  & .padd {
    margin-right: 5px;
  }
}
.bar-title {
  color: #666666;
  font-size: 14px;
  padding-left: 20px;
}
.select {
  width: 100px;
}
</style>